<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/5 xl:w-1/6" @select="handleSelect" />
    <BasicTable @register="registerTable" class="w-4/5 xl:w-5/6" :searchInfo="searchInfo">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">添加设备</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
            {
              icon: 'dashicons:database',
              tooltip: '采集参数',
              onClick: handleParams.bind(null, record),
            },
            {
              icon: 'clarity:notification-line',
              tooltip: '告警配置',
              onClick: handleAlarmConfig.bind(null, record),
            },
          ]" :dropDownActions="[
            {
              label: '设备位置',
              onClick: handleLocation.bind(null, record),
            },
            {
              label: '采集记录',
              onClick: handleGather.bind(null, record),
            },
            {
              label: '告警记录',
              onClick: handleAlarm.bind(null, record),
            },
            {
              label: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record.id)
              },
            },
          ]" />
        </template>
      </template>
    </BasicTable>
    <AlarmConfig @register="registerAlarmConfig" />
    <DeviceLocationDrawer @register="register5" @success="handleLocationSuccess" />
    <RecordParams @register="registerInRecordParams" />
    <RecordGather @register="registerInRecordGather" />
    <RecordAlarm @register="registerInRecordAlarm" />
    <AddDeviceModal @register="registerAddDeviceModal" @success="handleSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { PageWrapper } from '@/components/Page'
import DeptTree from './DeviceTypeTree.vue'
import { useModal } from '@/components/Modal'
import AlarmConfig from './AlarmConfig.vue'
import DeviceLocationDrawer from './DeviceLocationDrawer.vue'
import { columns, searchFormSchema } from './device.data'
import { getDevicePage, deleteDevice } from '@/api/collection/device'
import { useDrawer } from '@/components/Drawer'
import RecordParams from './RecordParams.vue'
import RecordGather from './RecordGather.vue'
import RecordAlarm from './RecordAlarm.vue'
import AddDeviceModal from './AddDeviceModal.vue'
import { message } from 'ant-design-vue'

defineOptions({ name: 'DeviceManagement' })

const [registerAlarmConfig, { openModal: openModalAlarmConfig }] = useModal()
const [register5, { openDrawer: openDrawer5 }] = useDrawer();
const [registerInRecordParams, { openModal: openModalInRecordParams }] = useModal();
const [registerInRecordGather, { openModal: openModalInRecordGather }] = useModal();
const [registerInRecordAlarm, { openModal: openModalInRecordAlarm }] = useModal();
const [registerAddDeviceModal, { openModal: openModalAddDevice }] = useModal()

const searchInfo = reactive<Recordable>({})
const selectDeviceInfo = reactive<Recordable>({});


const [registerTable, { reload, updateTableDataRecord, setPagination }] = useTable({
  title: '设备列表',
  api: getDevicePage,
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  useSearchForm: true,
  // showTableSetting: false,
  bordered: true,
  handleSearchInfoFn(info) {
    console.log('handleSearchInfoFn', info)
    return info
  },
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
  },
})

// 添加设备
function handleCreate() {
  openModalAddDevice(true, {
    type: searchInfo.type,
    isUpdate: false,
  })
}

function handleLocation(record: Recordable) {
  openDrawer5(true, {
    data: record,
  })
  // openLocationDrawer(true)
}

function handleAlarmConfig(record: Recordable) {
  openModalAlarmConfig(true, {
    record,
    isUpdate: false,
  })
}

function handleParams(record: Recordable) {
  openModalInRecordParams(true, {
    record,
    isUpdate: false,
  })
}

function handleGather(record: Recordable) {
  openModalInRecordGather(true, {
    record,
    isUpdate: false,
  })
}

function handleAlarm(record: Recordable) {
  selectDeviceInfo.deviceId = record.id,
    openModalInRecordAlarm(true, {
      record,
      isUpdate: false,
    })
}

function handleDelete(id) {
  deleteDevice({ id }).then(res => {
    message.success('删除成功')
    reload()
  })
}

function handleSuccess({ isUpdate, values }) {
  if (isUpdate) {
    // 演示不刷新表格直接更新内部数据。
    // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    const result = updateTableDataRecord(values.id, values)
    console.log(result)
  } else {
    reload()
  }
}

function handleLocationSuccess() {
  reload();
}
function handleSelect(code = '') {
  searchInfo.type = code
  setPagination({ current: 1 })
  reload()
}

</script>
